<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>Password Update Form</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main role="main" class="container mt-3 mb-3">
    <div id="pwdmain" th:fragment="pwdupdateform">
        <script th:inline="javascript">
            /*<![CDATA[*/

            let policyPattern = /*[[${passwordPolicyPattern}]]*/;
            let passwordStrengthI18n = {
                0: /*[[#{screen.pm.password.strength.0}]]*/,
                1: /*[[#{screen.pm.password.strength.1}]]*/,
                2: /*[[#{screen.pm.password.strength.2}]]*/,
                3: /*[[#{screen.pm.password.strength.3}]]*/,
                4: /*[[#{screen.pm.password.strength.4}]]*/
            };
            let passwordMinimumStrength = 0;

            /*]]>*/

            function generatePassword() {
                let possible = /*[[${passwordPolicyCharacterSet}]]*/;
                let text = '';
                for(let i = 0; i < /*[[${passwordPolicyPasswordLength}]]*/; i++) {
                    text += possible.charAt(Math.floor(Math.random() * possible.length));
                }
                $("#password").val(text);
                $("#confirmedPassword").val(text);

                let fields = document.querySelectorAll('.mdc-text-field');
                fields.forEach(f => {
                    const textField = new mdc.textField.MDCTextField(f);
                    textField.focus();
                });
                $('#submit').prop('disabled', "");
                document.getElementById("password").dispatchEvent(new Event("keyup"));
            }

        </script>
        <h3 th:utext="${expiredPass}
        ? #{screen.expiredpass.heading(${username})}
        : #{screen.mustchangepass.heading(${username})}">
            Change Password Heading</h3>

        <form id="passwordManagementForm" th:if="${passwordManagementEnabled}" method="post"
              th:object="${password}">
            <div class="banner banner-danger alert alert-danger banner-dismissible my-4" th:if="${#fields.hasErrors('*')}">
                <span th:each="err : ${#fields.errors('*')}" th:utext="${err}">Error text</span>
            </div>

            <div class="cas-field my-3 mdc-input-group form-group d-flex">
                <div class="mdc-input-group-field mdc-input-group-field-append flex-grow-1">
                    <div class="d-flex caps-check">

                        <label for="password"
                               class="mdc-text-field caps-check mdc-text-field--outlined control-label mdc-text-field--with-trailing-icon">
                            <input class="mdc-text-field__input form-control pwd"
                                   autocapitalize="none"
                                   spellcheck="false"
                                   type="password"
                                   name="password"
                                   id="password"
                                   th:field="*{password}"
                                   autocomplete="off" required/>
                            <span class="mdc-notched-outline">
                                <span class="mdc-notched-outline__leading"></span>
                                <span class="mdc-notched-outline__notch">
                                    <span class="mdc-floating-label" th:utext="#{screen.pm.enterpsw}">Enter Password:</span>
                                </span>
                                <span class="mdc-notched-outline__trailing"></span>
                            </span>
                        </label>
                        <i class="mdi mdi-alert mdc-text-field__icon text-danger caps-warn"></i>
                    </div>
                </div>
                &nbsp;
                <button class="reveal-password align-self-end mdc-button mdc-button--raised mdc-input-group-append mdc-icon-button btn btn-primary"
                    tabindex="-1" type="button">
                    <i class="mdi mdi-eye reveal-password-icon fas fa-eye"></i>
                    <span class="visually-hidden">Toggle Password</span>
                </button>
                <button class="align-self-end mdc-button mdc-button--raised mdc-input-group-append mdc-icon-button btn btn-primary"
                        tabindex="-1" type="button" onclick="generatePassword();">
                    <i class="mdi mdi-reload fas fa-eye"></i>
                    <span class="visually-hidden">Toggle Password</span>
                </button>
            </div>

            <div class="cas-field form-group mdc-input-group my-3">
                <div class="d-flex caps-check">
                    <label for="confirmedPassword" class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon control-label">
                        <input class="mdc-text-field__input form-control pwd"
                               type="password"
                               autocapitalize="none"
                               spellcheck="false"
                               name="confirmedPassword"
                               id="confirmedPassword"
                               th:field="*{confirmedPassword}"
                               autocomplete="off" required/>

                        <span class="mdc-notched-outline">
                            <span class="mdc-notched-outline__leading"></span>
                            <span class="mdc-notched-outline__notch">
                                <span class="mdc-floating-label" th:utext="#{screen.pm.confirmpsw}">Confirm Password:</span>
                            </span>
                            <span class="mdc-notched-outline__trailing"></span>
                        </span>
                    </label>
                    <i class="mdi mdi-alert mdc-text-field__icon bs-hide text-danger caps-warn"></i>
                </div>
            </div>

            <div class="cas-field form-group my-3 d-flex flex-column">
                <div class="d-flex align-items-center">
                    <span th:text="#{screen.pm.password.strength}">Strength:</span>&nbsp;
                    <span id="password-strength-icon" class="mdi" aria-hidden="true"></span>
                </div>
                <div id="strengthProgressBar" role="progressbar" class="d-none progress">
                    <div id="progress-strength-indicator" class="progress-bar progress-bar-indicator text-center"></div>
                    <div class="mdc-linear-progress">
                        <div class="mdc-linear-progress__buffering-dots"></div>
                        <div class="mdc-linear-progress__buffer"></div>
                        <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar" style="transform: scaleX(0);">
                            <span class="mdc-linear-progress__bar-inner"></span>
                        </div>
                        <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
                            <span class="mdc-linear-progress__bar-inner"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cas-field form-group my-3 text-warning" id="password-strength-msg" style="display: none;">
                <div class="suggestions banner banner-warning alert alert-warning p-2 mb-2 d-flex align-items-center" role="alert">
                    <span class="mdi mdi-information fas fa-info-circle" aria-hidden="true"></span>&nbsp;
                    <p class="m-0">
                        <span id="password-strength-warning"></span>&nbsp;
                        <span id="password-strength-suggestions"></span>
                    </p>
                </div>
            </div>
            <div class="cas-field form-group my-3 text-danger" id="password-strength-notes">
                <div id="password-policy-violation-msg" class="banner banner-danger alert alert-danger p-2" role="alert" style="display: none;">
                    <span class="mdi mdi-alert fas fa-exclamation-triangle" aria-hidden="true"></span>&nbsp;
                    <strong th:text="#{screen.pm.password.policyViolation}">Password does not match the password policy
                        requirement.</strong>
                </div>
                <div id="password-confirm-mismatch-msg" class="banner banner-danger alert alert-danger p-2" role="alert" style="display: none;">
                    <span class="mdi mdi-alert fas fa-exclamation-triangle" aria-hidden="true"></span>&nbsp;
                    <strong th:text="#{screen.pm.password.confirmMismatch}">Passwords do not match.</strong>
                </div>
            </div>

            <div class="cas-field form-group">
                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <input type="hidden" name="_eventId" value="submit"/>
                <button class="mdc-button mdc-button--raised btn btn-primary me-2"
                        name="submit"
                        accesskey="s"
                        th:value="#{screen.pm.button.submit}"
                        th:attr="data-processing-text=#{screen.welcome.button.loginwip}"
                        value="SUBMIT"
                        id="submit"
                        type="submit"
                        disabled="true">
                    <span class="mdc-button__label" th:text="#{screen.pm.button.submit}">Submit</span>
                </button>
                <a class="mdc-button mdc-button--outline btn btn-outline-secondary" th:href="@{/login}">
                    <span class="mdc-button__label" th:text="#{screen.pm.button.cancel}">CANCEL</span>
                </a>
            </div>
        </form>

        <p id="pwddesc" th:unless="${passwordManagementEnabled}"
           th:utext="${expiredPass} ? #{screen.expiredpass.message('https://pwd.example.org')} : #{screen.mustchangepass.message('https://pwd.example.org')}">Expired/Must Change Password text</p>
        
    </div>
</main>
</body>
</html>
